<template>
  <div style="height: 100%; width: 100%" class="app-container">
    <el-row :gutter="4">
      <el-col>
        <el-card shadow="never">
          <el-button
            v-throttle="handleQuery"
            type="primary"
            style="margin-left: 10px; margin-bottom: 10px"
          >
            <i-ep-refresh style="margin-right: 5px" />
            {{ $t("taskboard.Aktualisieren") }}</el-button
          >
          <el-table
            v-loading="loading"
            align="left"
            :empty-text="$t('taskboard.übermitteln')"
            :data="experimentData"
          >
            <el-table-column
              :label="$t('taskboard.ZuvervollständigendeListe')"
              prop="name"
            >
              <template #default="scope">
                <div
                  class="flex items-center"
                  style="cursor: pointer; width: 100%; position: relative"
                  @click="submitExp(scope.row)"
                >
                  <svg-icon
                    icon-class="daiwanchengrenwu"
                    style="margin-right: 15px; font-size: 38px"
                  ></svg-icon>
                  <div>
                    <div
                      style="
                        font-size: 18px;
                        color: var(--text-black-color);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                    >
                      {{
                        scope.row.courseName +
                        "-" +
                        scope.row.expName +
                        "-" +
                        scope.row.leaderName
                      }}
                    </div>
                    <div>
                      <span style="margin-right: 15px">{{
                        $t("taskboard.Zuvervollständigen")
                      }}</span>
                      <span style="color: var(--el-color-primary)">{{
                        $t("taskboard.Klickenundsenden")
                      }}</span>
                    </div>
                  </div>
                  <div style="position: absolute; right: 0">
                    {{ $t("taskboard.Frist") + " " + scope.row.endTime }}
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { getCompletedPage } from "@/api/experiment";
import { CompletedType, CompletedQuery } from "@/api/experiment/types";
import { useRouter } from "vue-router";

const router = useRouter();

const experimentData = ref<CompletedType[]>([]);
const loading = ref(false);
const total = ref(0);

const queryParams = reactive<CompletedQuery>({
  pageNum: 1,
  pageSize: 10,
});

function handleQuery() {
  loading.value = true;
  getCompletedPage(queryParams)
    .then(({ data }) => {
      experimentData.value = data.list;

      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

function submitExp(row: any) {
  let routeData = router.resolve({
    path: "/studyinfo/studysubmit",
    query: {
      experimentId: row.experimentId,
      courseId: row.courseId,
    },
  });
  window.open(routeData.href, "_blank");
}

onMounted(() => {
  handleQuery();
});

onActivated(() => {
  handleQuery();
});
</script>

<style scoped></style>
